<template>
  <div :class="{
    'warningInfo-box': true,
    'warningInfo-box-dark': isDarkTheme,
    'warningInfo-box-light': !isDarkTheme,
    'scroll_table': true,
  }">
  <div style="display: inline-block; width: 100%">
      <el-table :data="tableData" class="table" :header-row-style="{background: 'rgba(20, 153, 255, 0.2)'}">
        <el-table-column
          v-for="(item,index) in columns"
          :key="index+'i'"
          :label="item.label"
          :prop="item.prop"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        />
      </el-table>
      <vue-seamless-scroll
        :data="tableData"
        class="seamless-warp"
        :class-option="classOption"
      >
      <!-- :style="{height: tableHeight + 'px'}" -->
        <el-table
          size="small"
          ref="tableRef"
          :data="tableData"
          @row-click="handleRowClick"
          class="table_scroll"
        >
          <el-table-column
            v-for="(item, index) in columns"
            :key="index+'i'"
            :prop="item.prop"
            :label="item.label"
            :align="item.align || 'center'"
            :min-width="item.minWidth"
            :show-overflow-tooltip="item.showOverflowTooltip || true"
          >
            <template slot-scope="scope">
              <!-- 若在具名插槽，根据传入的slot属性定位列元素，scope.row赋值 -->
              <!-- 若不存在具名插槽，正常渲染列内容 -->
              <span v-if="item.prop === 'status'" :style="formatCategory(scope.row.status).style">
                {{ scope.row.status }}
              </span>
              <span v-else>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>

          <slot></slot>
        </el-table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import CustomTable from '../components/CustomTable.vue'
import { DowntimeColumns, timeoutColumns, excessColumns, abnormalColumns } from './tableColumns'
import vueSeamlessScroll from "vue-seamless-scroll";
 
export default {
  components: {
    CustomTable,
    vueSeamlessScroll,
  },
  props: {
    pageConfig: Object
  },
  data() {
    return {
      columns: [...DowntimeColumns],
      tableHeight: 200,
      tableData: [
        {
          title: 'xx1',
          province: '江苏',
          city: '渠道-初审',
          status: '已派单',
          content: 'xx',
        },
        {
          title: 'xx2',
          province: '江苏',
          city: '渠道-初审',
          status: '处理中',
          content: 'xx',
        },
        {
          title: 'xx3',
          province: '江苏',
          city: '渠道-初审',
          status: '已接收',
          content: 'xx',
        },
        {
          title: 'xx4',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx5',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx6',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx7',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx8',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx9',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx10',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx11',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
        {
          title: 'xx12',
          province: '江苏',
          city: '渠道-初审',
          status: '未处理',
          content: 'xx',
        },
      ]
    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    },
    formatCategory() {
      const tempMap = {
        '已派单': {
          style: { color: '#AEDBF1'}
        },
        '已接收': {
          style: { color: '#00C252'}
        },
        '处理中': {
          style: { color: '#FF8A48'}
        },
        '未处理': {
          style: { color: '#A21941'}
        },
      }
      return category => {
        return tempMap[category] || {}
      }
    },
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 12, // 开始无缝滚动的数据量 this.tableData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 500, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },

  created() {
    this.tableHeight = window.innerHeight / 3 - 90;
  },
  mounted() {
    window.onresize = () => {
      this.handleTableHeight
    }
  },
  methods: {
    handleTableHeight: function () {
      var _this = this;
      window.onresize = () => {
          _this.tableHeight = window.innerHeight / 3 - 50
      };
    },
    changeTable(type) {
      if (type === 'first') {
        this.columns = [...DowntimeColumns]
      } else if (type === 'second') {
        this.columns = [...timeoutColumns]
      } else if (type === 'third') {
        this.columns = [...excessColumns]
      } else if (type === 'fourth') {
        this.columns = [...abnormalColumns]
      }
    },
    handleRowClick(row) {
      this.$emit('handleRowClick', row);
    },
  }
}
</script>

<style lang="scss" scoped>
  .warningInfo-box {
    height: calc(100% - 35px);
    width: 100%;
    overflow: hidden;
  }
  .el-table {
    font-size: 12px;
  }
  // 表格滚动
  .scroll_table {
    margin: 0;
    width: 100%;
    display: flex;
    ::v-deep .table .el-table__body-wrapper {
      display: none;
    }
    // 重点注意这段样式
    .seamless-warp {
      width: 100%;
      height: 200px;
      overflow: hidden;
      ::v-deep .table_scroll .el-table__header-wrapper {
        display: none;
      }
    }
  }

  ::v-deep .seamless-warp > div >:nth-child(2) {
    // width: 100%;
    // display: none !important;
  }


  .warningInfo-box-dark {
    ::v-deep .el-table {
      background: transparent !important;
      border: none;
    }

    /** 表格底部线条 */ 
    ::v-deep .el-table::before {
      background: transparent;
    }

    ::v-deep .el-table tr {
      background: transparent;
      border: none;
    }
    ::v-deep .el-table .el-table__cell.is-leaf {
      color: #B4C0CC;
      background: transparent;
      border: none;
    }
    ::v-deep .el-table .el-table__cell{
      border: none;
      color: #fff;
      padding: 4px 0;
      // font-size: 12px;
    }
    // 选中行时背景颜色设置
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background: transparent;
    }

    /** 滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
      background-color: #063570; // 与大屏背景颜色一致，实现隐藏
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px;
      opacity: 0.5;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 15px;
      background-color: #0257aa;
    }
  }
  /* 媒体查询，当屏幕分辨率大于 1920x1080 时，设置文字大小为 18px */
 // 2K
  @media screen and (max-width: 2560px) {
    // .seamless-warp {
    //   transform: scale(1);  
    // }
    .el-table {
      font-size: 18px;
    }
  }
  // 全高清屏幕
  @media screen and (max-width: 1920px) {
    // .seamless-warp {
    //   transform: scale(1);  
    // }

    .el-table {
      font-size: 12px;
    }
  }
</style>